<template>
	<view class="page-member">
		<view class="header">
			<image class="member-bg" src="https://pet.dqword.com:8021/weappImg/bg_05.png" mode=""></image>
			<view class="member-title">方舟动物医疗 VIP会员</view>
			<view class="member-info">
				<view class="vip-price">
					<view class="price yuan">99</view>
					<view class="origin-price">原价￥199</view>
				</view>
				<view class="vip-limit">
					<!-- <view class="vip-op">立即开通</view> -->
					<view class="status">已开通</view>
					<view class="limit-time">有效期: 永久</view>
				</view>
			</view>
			
		</view>
		
		<view class="profit">特权权益说明</view>
		<view class="profit-con">
			一、到店消费打9.8折；
			二、预约挂号不等待，优先服务；
			三、最终解释权归方舟医疗所有。
		</view>
	</view>
</template>

<script>
	import common from '../utils/common.js'
	export default {
		data() {
			return{
				common
			}
		}
	}
</script>

<style scoped lang="scss">
	.page-member{
		padding: 30upx;
		box-sizing: border-box;
	}
	.header{
		position: relative;
		height: 330upx;
		width: 100%;
		padding: 50upx;
		box-sizing: border-box;
		align-items: flex-start;
		justify-content: space-between;
	}
	.member-bg{
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
	}
	.member-title{
		position: relative;
		font-size: 48upx;
		color: #f5dab2;
	}
	.member-info{
		@include flex-base;
		justify-content: space-between;
		position: relative;
		width: 100%;
	}
	.vip-price{
		display: flex;
		flex-direction: column;
		.price{
			font-weight: bold;
			font-size: 80upx;
			line-height: 80upx;
			color: #f5dab2;
			height: 80upx;
		}
		.origin-price{
			text-decoration: line-through;
			font-size: $font-size-28;
			color: #666;
		}
	}
	.vip-op{
		background: #f5dab2;
		width: 170upx;
		height: 60upx;
		border-radius: 60upx;
		@include flex-base;
		justify-content: center;
		font-weight: bold;
		color: #1a1a1a;
	}
	.vip-limit{
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		position: relative;
		.status{
			color: #fff;
			font-weight: bold;
			font-size: $font-size-28;
		}
		.limit-time{
			color: #666;
			font-size: $font-size-24;
			margin-top: 10upx;
		}
	}
	.profit{
		font-weight: bold;
		font-size: $font-size-32;
		position: relative;
		margin: 100upx 0 30upx 0;
		display: inline-block;
		padding: 0 10upx;
		&::after{
			content: '';
			display: inline-block;
			height: 6upx;
			background-color: rgba(245,218,178,0.5);
			width: 100%;
			position: absolute;
			    left: 0;
			    bottom: 5upx;
		}
	}
	.profit-con{
		font-size: $font-size-28;
		color: 333333;
		line-height: 42upx;
	}
</style>
